<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">账号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="username" placeholder="" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="nickname" placeholder="" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="data-table-query-filter">
                        <i class="layui-icon layui-icon-search"></i>查询
                    </button>
                    <button type="reset" class="pear-btn pear-btn-md">
                        <i class="layui-icon layui-icon-refresh"></i>重置
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="layui-card">
    <div class="layui-card-body">
        <table id="data-table" lay-filter="data-table-filter"></table>
    </div>
</div>

<script type="text/html" id="toolbarLeftTpl">
    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>分配用户
    </button>
    <button class="pear-btn pear-btn-danger pear-btn-md layui-hide" lay-event="batchDelete">
        <i class="layui-icon layui-icon-delete"></i>删除
    </button>
</script>
<script type="text/html" id="operationTpl">
    <button class="pear-btn pear-btn-xs pear-btn-primary" lay-event="detail" title="详情"><i class="layui-icon layui-icon-eye"></i></button>
    <button class="pear-btn pear-btn-xs pear-btn-danger" lay-event="delete" title="从部门中移除"><i class="layui-icon layui-icon-delete"></i></button>
</script>

<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script>
			layui.use(['table', 'form', 'jquery','layer', 'admin', 'dict'], function() {
				let table = layui.table;
				let form = layui.form;
				let $ = layui.jquery;
				let layer = layui.layer;
				let admin = layui.admin;
				let dict = layui.dict;
				let url = layui.url();
				let deptId = url.search.deptId;

				let cols = [[
                    { type: 'checkbox', hide: true },
                    { field: 'id', title: 'ID', width: 200, hide: true },
                    { field: 'username', title: '账号', width: 120 },
                    { field: 'nickname', title: '姓名', width: 120 },
                    { field: 'gender', title: '性别', width: 70, templet: function(d) {
                        return dict.label('vtl_user_gender', d.gender, true);
                    } },
                    { field: 'idCardNumber', title: '身份证号', hide: true },
                    { field: 'email', title: '邮箱' },
                    { field: 'mobilePhone', title: '电话', width: 150 },
                    { field: 'disabled', title: '账号状态', width: 120, templet: function(d) {
                        return dict.label('vtl_disabled', d.disabled, true);
                    } },
                    { field: 'createByName', title: '创建者', width: 120, hide: true },
                    { field: 'createTime', title: '创建时间', width: 160, hide: true, templet: function (d) {
                        return layui.util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss");
                    }},
                    { field: 'updateByName', title: '更新者', width: 120 },
                    { field: 'updateTime', title: '更新时间', width: 160, templet: function (d) {
                        return layui.util.toDateString(d.updateTime, "yyyy-MM-dd HH:mm:ss");
                    }},
                    { field: 'operation', title: '操作', width: 120, fixed: 'right', templet: '#operationTpl' }
                ]]


				table.render({
					elem: '#data-table',
					url: '/vtl-user/page/byDept/' + deptId,
					request: {
                        pageName: 'current', // 页码的参数名称，默认：page
                        limitName: 'size' // 每页数据条数的参数名，默认：limit
                    },
					parseData: function(res) {
                        return {
                            "code": 0,
                            "msg": 'SUCCESS',
                            "count": res.total,
                            "data": res.records
                        };
                    },
					page: true,
					cols: cols,
					skin: 'line',
					toolbar: '#toolbarLeftTpl',
					defaultToolbar: [{ title: '刷新', layEvent: 'refresh', icon: 'layui-icon-refresh'}, 'filter', 'print', 'exports']
				});

				table.on('toolbar(data-table-filter)', function(obj) {
					if (obj.event === 'add') {
						window.selectUser();
                    } else if (obj.event === 'batchDelete') {
                        window.batchDelete();
					} else if (obj.event === 'refresh') {
                        window.refresh(true);
                    }
				});

				table.on('tool(data-table-filter)', function(obj) {
				    let row = obj.data;
                    switch (obj.event) {
                        case 'detail':
                            window.detail(row.id);
                            break;
                        case 'delete':
                            window.delete(obj);
                            break;
                        default:
                            break;
                    }
				});

				form.on('submit(data-table-query-filter)', function(data) {
					window.refresh(data.field);
					return false;
				});

				window.refresh = function(field = {}, deep = false) {
				    $.vtl.tableReloadData('data-table', field, deep);
				}

				window.selectUser = function() {
				    let _this = this;
                    let success = function(layero, index, that) {
                        // 得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                        // var iframeWin = window[layero.find('iframe')[0]['name']];
                        // iframeWin.init($('#userAvatar').attr('src'));
                    };
                    let yes = function(index, layero, that) {
                        // var $body = layui.layer.getChildFrame('body', index);
                        // var $sourceImage = layui.layer.getChildFrame('#sourceImage', index);
                        var iframeWin = window[layero.find('iframe')[0]['name']];
                        let checkedUserIdList = iframeWin.getCheckedIdList();
                        if(checkedUserIdList.length > 0) {
                            $.post('/vtl-dept/addUser/' + deptId, { userIdList: checkedUserIdList }, function(result) {
                                if(result.code == 200) {
                                    window.refresh();
                                    layer.close(index);
                                }
                            });
                        }
                    };
                    $.vtl.openUserSelector(success, yes, true);
                }

				window.delete = function(obj) {
                    layer.confirm('确定从部门中移除？', { icon: 3, title: '提示' }, function(index) {
                        layer.close(index);
                        $.delete('/vtl-dept/removeUser/' + deptId, { userIdList: [ obj.data.id ] }, function(result) {
                            if (result.code == 200) {
                                obj.del();
                            }
                        });
                    });
                }

				window.detail = function(id, title = '用户详情') {
					top.layui.admin.jump('vtl-user-' + id, title, 'views/system/user/detail.html?id=' + id)
				}

			})
		</script>
</body>
</html>
